import 'package:flutter/cupertino.dart';
import 'package:flutter_demo/pages/animation/list_item_animation_page.dart';
import 'package:flutter_demo/pages/page_with_title.dart';
import 'package:flutter_demo/widgets/app_widgets.dart';

class SliverPage extends PageWithTitle {
  const SliverPage() : super("可滚动组件构建块(Sliver)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("在Flutter中组件分两种："),
      BodyText("- Box组件，所有非Sliver组件都是Box组件，在2D笛卡尔坐标系中按固定的坐标排布。"),
      BodyText("- Sliver组件，实现嵌套滚动、或者类似Android CoordinatorLayout的复杂滚动"
          "行为的组件。"),
      AppSpacer.large,
      BodyText("在金属加工中，Sliver是指从较大金属块上切下的薄片或长条。这些薄片可以独立加工"
          "，但最终能组合成复杂的结构。Flutter借用这个概念，将可滚动组件拆分为多个独立的 “薄"
          "片”（Sliver），每个Sliver负责特定的滚动行为或布局，最终组合成完整的滚动界面。"),
      AppSpacer.normal,
      LabelText("- 独立单元：每个Sliver都是独立的渲染单元，负责自身的布局、绘制和交互"),
      LabelText("- 可组合性：多个Sliver可以无缝组合，形成复杂的滚动效果"),
      LabelText("- 按需渲染：Sliver支持懒加载和按需渲染，提高性能"),
      AppSpacer.normal,
      NoticeText("注意："),
      NoticeText("- Sliver组件只能在CustomScrollView中使用，其类名一般以Sliver开头，参"
          "数名一般为sliver、slivers，而box组件参数名一般是child、children，还是挺好分辨的"),
      NoticeText("- Box组件可以通过SliverToBoxAdapter组件转换为Sliver组件使用"),
      AppSpacer.large,
      UlItem("CustomScrollView"),
      BodyText("自定义滚动视图，它继承自ScrollView将buildSlivers函数实现作为参数slivers"
          "暴露出来。"),
      AppSpacer.large,
      UlItem("ScrollView"),
      BodyText("作为滚动组件的核心实现，build构建组件时返回Scrollable，viewportBuilder"
          "返回Viewport，它根据视窗位置，加载可见的sliver组件，实现懒加载"),
      AppSpacer.large,
      UlItem("Scrollable"),
      BodyText("负责处理用户滚动输入（如拖拽、惯性滚动）"),
      AppSpacer.large,
      UlItem("Viewport"),
      BodyText("可视区域的窗口，决定哪些Sliver应该被渲染"),
      LabelText("- layoutChildSequence 布局子组件，此方法由布局更新时调用，通过"
          "sliver.layout将当前滚动视图的约束信息SliverConstraints传入子组件，子组件布局"
          "完毕，返回SliverGeometry告知滚动视图sliver的几何空间占用信息"),
      AppSpacer.large,
      UlItem("ListView GridView"),
      BodyText("我们常用的列表组件，实际也是ScrollView的子类，它内部通过SliverList实现，因"
          "为常常是相同种类的item，他们有一些变种在快速滚动时计算量更小性能更有优势，根据不同的"
          "参数采用不同的实现。"),
      LabelText("以ListView为例，可滚动组件常常需要在中间某个位置布局显示，每次都按照列表从头"
          "到尾实际测量每个sliver占用的空间非常耗费性能，它提供三个优化参数可以加快这个计算过程"),
      LabelText(
          "- itemExtent 条目占据的空间大小，若设置将以固定条目高度的列表SliverFixedExtentList去构建"),
      LabelText(
          "- itemExtentBuilder 通过回调指定条目占据的空间大小，若设置将以可变条目高度的列表SliverVariedExtentList去构建，虽然高度有变，但因为通过回调获取，速度肯定比去测量来的快"),
      LabelText(
          "- prototypeItem 通过给定一个原型item来指定条目占据的空间大小，SliverPrototypeExtentList以给定的原型测量尺寸，将该尺寸应用于所有item"),
      AppSpacer.large,
      PrimaryTitle("内置的Sliver组件"),
      OlItem(1, "SliverList"),
      BodyText("类似ListView，但作为sliver使用"),
      AppSpacer.large,
      OlItem(2, "SliverFixedExtentList"),
      BodyText("子项固定高度的列表"),
      AppSpacer.large,
      OlItem(3, "SliverVariedExtentList"),
      BodyText("子项高度由回调函数决定的列表，若回调函数的计算量过大会影响布局的效率，这个一般"
          "是作为列表包含多种item类型，通过回调函数给不同的item类型返回其给定的高度，即作为"
          "SliverFixedExtentList的MultiItem版本实现"),
      AppSpacer.large,
      OlItem(4, "SliverPrototypeExtentList"),
      BodyText("通过给定的item示例来确定item高度的列表"),
      AppSpacer.large,
      OlItem(5, "SliverAnimatedList SliverAnimatedGrid"),
      BodyText("AnimatedList、AnimatedGrid的Sliver版本，可以参考"),
      PageLink(ListItemAnimationPage()),
      AppSpacer.large,
      OlItem(6, "SliverReorderableList "),
      BodyText("支持拖拽排序的列表，ReorderableList的Sliver版本"),
      AppSpacer.large,
      OlItem(7, "SliverGrid"),
      BodyText("GridView的Sliver版本"),
      AppSpacer.large,
      OlItem(8, "SliverPadding"),
      BodyText("Padding的Sliver版本"),
      AppSpacer.large,
      OlItem(9, "SliverFillRemaining"),
      BodyText("填充剩余空间，类似Expanded"),
      AppSpacer.large,
      OlItem(10, "SliverFillViewport"),
      BodyText("填充整个视窗"),
      AppSpacer.large,
      OlItem(11, "SliverAppBar"),
      BodyText("可滚动的应用栏，支持展开/折叠效果"),
      AppSpacer.large,
      OlItem(12, "SliverPersistentHeader"),
      BodyText("可滚动的固定头部组件"),
      AppSpacer.large,
      OlItem(13, "SliverToBoxAdapter"),
      BodyText("将普通Widget转换为 Sliver"),
      AppSpacer.large,
      OlItem(14, "SliverSafeArea"),
      BodyText("SafeArea的Sliver版本"),
      AppSpacer.large,
      OlItem(15, "SliverOpacity"),
      BodyText("Opacity的Sliver版本"),
      AppSpacer.large,
      OlItem(16, "SliverVisibility"),
      BodyText("Visibility的Sliver版本"),
      LabelText("实际上控制可见性的Visibility组件也基本用不到，因为Flutter是声明式UI，若组"
          "件不需要显示直接不声明即可"),
    ];
  }
}
